<template>
  <div>
    <div>
      <ul>
        <li v-for="(item, index) in listjindu" :key="index">
          <span
            class="titlist"
            :style="{ backgroundImage: `url(${item.img})` }"
            style="background-size: 100% 100%"
            >{{ item.num }}</span
          >
          <span class="jinduname">{{ item.name }}</span>
          <el-progress
            :percentage="item.total"
            :text-inside="false"
            :stroke-width="15"
            :color="item.customColors"
            text-color="#fff"
            :format="setItemText(item)"
          ></el-progress>
          <span class="baifen">{{ item.percentage }}%</span>
          <span
            class="icon arrawtransform"
            :style="{ backgroundImage: `url(${item.imgshang})` }"
            sty
          ></span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import img1 from "../../assets/img/Union@1x-47.png";
import img2 from "../../assets/img/Union@1x-48.png";
import img3 from "../../assets/img/Union@1x-49.png";
import img4 from "../../assets/img/Union@1x-50.png";
import shang from "../../assets/common-new/green-top.png";
import xia from "../../assets/common-new/red-down.png";
export default {
  components: {},
  props: {},
  data() {
    return {
      listjindu: [
        {
          num: 1,
          total: 83.9,
          percentage: 105.74,
          name: "亳州市",
          customColors: "#c54661",
          // [
          //   { color: "#f56c6c", percentage: 20 },
          //   { color: "#e6a23c", percentage: 40 },
          //   { color: "#5cb87a", percentage: 60 },
          //   { color: "#1989fa", percentage: 80 },
          //   { color: "#6f7ad3", percentage: 100 },
          // ],
          img: img1,
          imgshang: shang,
        },
        {
          num: 2,
          total: 74.82,
          percentage: 25.66,
          name: "阜阳市",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img2,
          imgshang: xia,
        },
        {
          num: "3",
          total: 56.88,
          percentage: 99.44,
          name: "合肥市",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img3,
          imgshang: shang,
        },
        {
          num: "4",
          total: 38.48,
          percentage: 106.22,
          name: "蚌埠市",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: shang,
        },
        {
          num: "5",
          total: 32.18,
          percentage: 18.92,
          name: "淮南市",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: shang,
        },
        {
          num: "6",
          percentage: 16.55,
          total: 27.84,
          name: "宿州市",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: xia,
        },
        {
          num: "7",
          total: 18.68,
          percentage: 1.63,
          name: "六安市",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: shang,
        },
        {
          num: "8",
          total: 16.14,
          percentage: 25.55,
          name: "淮北市",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: xia,
        },
        {
          num: "9",
          total: 14.08,
          percentage: 45.3,
          name: "安庆市",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: xia,
        },
        {
          num: "10",
          total: 13.2,
          percentage: 30.82,
          name: "黄山市",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: xia,
        },
        {
          num: "11",
          total: 11.44,
          percentage: 38.63,
          name: "池州市",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: xia,
        },
        {
          num: "12",
          total: 7.04,
          percentage: 40.94,
          name: "铜陵市",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: xia,
        },
        {
          num: "13",
          total: 7.04,
          percentage: 57.64,
          name: "宣城市",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: xia,
        },
        {
          num: "14",
          total: 6.14,
          percentage: 30.07,
          name: "芜湖市",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: xia,
        },
        {
          num: "15",
          total: 4.5,
          percentage: 69.55,
          name: "滁州市",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: xia,
        },
        {
          num: "16",
          total: 1.82,
          percentage: 87.04,
          name: "马鞍山市",
          customColors: [
            { color: "#f56c6c", percentage: 20 },
            { color: "#e6a23c", percentage: 40 },
            { color: "#5cb87a", percentage: 60 },
            { color: "#1989fa", percentage: 80 },
            { color: "#6f7ad3", percentage: 100 },
          ],
          img: img4,
          imgshang: xia,
        },
      ],
    };
  },
  watch: {},
  computed: {},
  methods: {
    setItemText(row) {
      return () => {
        return row.total + "万支 ";
      };
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
@import "../../assets/scss/qjzl-neiguan.scss";

.lftopdiv {
  width: 100%;
  height: 793px;
  margin: 0 auto;
  background: url(../../assets/qjzl/lftopdiv1.png);
  background-size: 100% 100%;
  padding: 27px 16px 18px 16px;
  margin-top: -7px;
  position: relative;

  ul {
    list-style: none;

    li {
      width: 100%;
      height: 47px;
      line-height: 30px;
    }

    .jinduname {
      font-size: 14px;
    }

    .icon {
      width: 1.5%;
      height: 30%;
      font-size: 14px;
      background-size: 100% 100%;
      margin-top: 11px;
    }

    .baifen {
      width: 18%;
      margin-left: 10px;
      font-size: 14px;
    }
  }

  .titlist {
    float: left;
    width: 24px;
    height: 20px;
    text-align: center;
    line-height: 22px;
    font-size: 12px;
    margin-top: 5px;
    margin-right: 5px;
    padding-right: 1px;
  }

  span {
    float: left;
    width: 15%;
  }

  .el-progress {
    float: left;
    width: 50%;
    margin-top: 6px;
  }
}

.lftopdiv::after {
  content: "";
  display: block;
  width: 100%;
  height: 15px;
  background: url(../../assets/qjzl/lftopdiv1bot.png);
  background-size: 100% 100%;
  position: absolute;
  bottom: 0%;
  left: 0%;
}

::v-deep .el-progress__text {
  width: 100%;
  font-size: 14px !important;
  text-align: center;
}

::v-deep .el-progress-bar__outer {
  background-color: rgba(17, 44, 112, 1) !important;
}
::v-deep .el-progress-bar {
  padding: 0 !important;
}
</style>